<%--
  Created by IntelliJ IDEA.
  User: 陈春宇
  Date: 2023/12/12
  Time: 13:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人力资源管理系统登录</title>
    <link rel="stylesheet" href="/human-resource/css/bootstrap.min.css">
    <script defer src="/human-resource/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

    <style>
    </style>

</head>
<body>
<section class="navbar navbar-expand-lg navbar-dark bg-primary">
    <nav class="container">
        <div class="navbar-collapse collapse" id="nav-menu">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <button class="nav-link active" id="loginButton">登录</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="registerButton">注册</button>
                </li>
            </ul>
        </div>

    </nav>
</section>

<!-- banner -->
<div class="container p-5 mt-5">
    <h1 class="text-center text-secondary header pb-3">人力资源管理系统</h1>
    <p class="text-center text-secondary lead">用户登录</p>
    <hr>
</div>


<div class="container">
    <div class="col-md-8 offset-md-2">
        <section class="px-5">

            <!-- 登录表单 -->
            <form action="/human-resource/user/login" method="post" id="loginForm">

                <!--登录提示信息-->
                <c:if test="${loginMsg != null}">
                    <p class="fs-6 ps-3 text-secondary"><%=request.getAttribute("loginMsg")%></p>
                </c:if>

                <div class="input-group input-group-lg p-3 mb-3">
                    <span class="input-group-text">
                        <span class="bi bi-person-fill"></span>
                    </span>
                    <input type="text" class="form-control" name="username" required>
                </div>

                <div class="input-group input-group-lg p-3 mb-3">
                     <span class="input-group-text">
                        <span class="bi bi-lock-fill"></span>
                    </span>
                    <input type="password" class="form-control" name="password" required>
                </div>

                <div class="p-3 mb-3">
                    <button class="btn btn-primary btn-lg d-block w-100" type="submit">登 录</button>
                </div>

            </form>

            <!-- 注册表单 -->
            <form action="/human-resource/user/register" method="post" class="d-none" id="registerForm">
                <!-- 注册表单提示信息 -->
                <c:if test="${msg != null}">
                    <p class="fs-6 ps-3 text-secondary"><%=request.getAttribute("msg")%></p>
                </c:if>
                <div class="input-group input-group-lg p-3 mb-3">
                    <span class="input-group-text">
                        <span class="bi bi-person-fill"></span>
                    </span>
                    <input type="text" class="form-control" name="username" required>
                </div>

                <div class="input-group input-group-lg p-3 mb-3">
                     <span class="input-group-text">
                        <span class="bi bi-lock-fill"></span>
                    </span>
                    <input type="password" class="form-control" name="password" required>
                </div>

                <div class="p-3 mb-3">
                    <button class="btn btn-warning btn-lg d-block w-100" type="submit">注 册</button>
                </div>

            </form>

        </section>
    </div>
</div>


<!-- 页脚 -->
<footer style="margin-top: 170px">
    <hr>
    <p class="text-center text-secondary" style="font-size: 13px">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
    <p class="text-center text-secondary" style="font-size: 13px">@copyright: 周婷</p>
</footer>

</body>

<script>

    //显示注册表单
    function activeRegisterForm(){
        //显示注册表单，隐藏登录表单
        document.querySelector("#registerForm").classList.remove('d-none')
        document.querySelector("#loginForm").classList.add('d-none')

        //注册链接字体高亮，登录链接字体去除高亮
        document.querySelector('#registerButton').classList.add('active')
        document.querySelector('#loginButton').classList.remove('active')
    }

    //显示登录表单
    function activeLoginForm(){
        //显示登录表单，隐藏注册表单
        document.querySelector("#loginForm").classList.remove('d-none')
        document.querySelector("#registerForm").classList.add('d-none')

        //注册链接字体高亮，登录链接字体去除高亮
        document.querySelector('#loginButton').classList.add('active')
        document.querySelector('#registerButton').classList.remove('active')
    }

    // 注册/登录表单切换
    document.querySelector('#registerButton').addEventListener('click', function(e){
        activeRegisterForm();
    })

    document.querySelector('#loginButton').addEventListener('click', function(e){
        activeLoginForm();
    })


    //注册后自动显示注册表单
    window.onload = function (){
        if (<%=request.getAttribute("msg") != null%>){
            activeRegisterForm()
        }
    }




</script>

</html>
